<template>
	<div class="endLive">
		<div class="endLiveCont">
			<div class="bjImg">
				<image src="@/static/image/user/bj.png" mode="" class=""></image>
			</div>

			<div class="endLiveCenter">
				<div class="endLiveCont_back">
					<!-- <image src="@/static/image/left.png" mode="" class="endLiveCont_back_img"></image> <span>用户标签</span> -->

					<u-navbar leftText="用户标签" @leftClick="backBtn" leftIconColor="#1D2129"  bgColor="transparent">
			        </u-navbar>
					<!-- <div class="useLable">
						<image src="@/static/image/hex.png" mode="">
							用户标签
					</div> -->
				</div>
			</div>
			<!-- content -->
			<div class='userDetail'>
				<div class="prizeDraw_top_title">
					<input type="text" placeholder="请输入标签名称搜索" v-model="from.name" placeholder-class="zj-placeholder-class"
						@search='couponEvent'>
					<div class="inputSeach" @click='couponEvent()'>
						<image src="@/static/image/sousuo.png" mode=""></image>
					</div>
				</div>
				<!-- scroll -->
				<scroll-view @scrolltolower="scrolltolower" class="scrollView" :scroll-y="true" :scroll-top="scrollTop" 
					:scroll-with-animation="true">
					<div class="dialogue-box-content">
						<div class="userTagItems" v-for="(ite, idx) in tagList" :key="idx">
							<div class="userTagItems_top">
								<div class="userTagItems_top_lable tjLable" v-if='ite.tagType == 1'>
									手动标签
								</div>
								<div class="userTagItems_top_lable" v-if='ite.tagType == 2'>
									条件标签
								</div>
								<div class="userTagItems_top_lable dbLable" v-if='!ite.status'>
									打标中
								</div>
								<div class="userTagItems_top_text">
									<span v-if='!ite.status' class="spanColor"></span>
									<span v-else></span>
									<div class="userTagItems_top_peo ex">
										{{ ite.name }}
									</div>
								</div>
								<div class="userTagItems_top_num">
									{{ ite.useCount }}人
								</div>
							</div>
							<div class="userTagItems_bottom">
								<div class="userTagItems_bottom_btn" v-if='ite.status' @click='eitEvent(ite)'>
									编辑
								</div>
								<div class="userTagItems_bottom_left" @click='deleteEvent(ite, idx)'>
									删除
								</div>
							</div>
						</div>
						<div class="listSpace" v-if="tagList.length <= 0 && loading">
							<list-space></list-space>
						</div>
						<div class="zj_space">

						</div>
						<div class="zj_space">

						</div>
						<div class="zj_space">

						</div>
						<div class="userTagBtn">
							<div class="userTagBtn_text" @click='addTagEvent()'>
								新增标签
							</div>
						</div>
					</div>
					<!-- mask -->
					<!-- mask -->
					<tagMask @backEvent='backMaskEvent' :random='random' v-if='isMask' @backCloseEvent='backCloseEvent'
						:eitFrom='eitFrom'></tagMask>
				</scroll-view>

			</div>


		</div>


	</div>
</template>

<script>
import tagMask from './components/tagMask.vue'
export default {
	components: {
		tagMask
	},
	filters: {
		formatDate(v) {
			if (v == 0) {
				return '-'
			}
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		},

	},
	data() {
		return {
			params: {
				customerId: '1803713742077173760',
			},
			loading: false,
			tagList: [],
			from: {
				name: ''
			},
			isMask: false,
			eitFrom: {},
			random: 0,
			scrollTop:0
		}
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.tagList = []
		this.loading = false
		this.getTagList()
	},
	onLoad(opt) {
		if (opt.customerId) {
			this.params.customerId = opt.customerId || '1803713742077173760'
		}
		this.getTagList() //获取用户详情
	},
	methods: {
		// 新增成功翻到最底部
		chatScrollTop() {
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.dialogue-box-content').boundingClientRect((res) => {
					console.log(res, 'res')

					// let top = res.height - this.scrollViewHeight;
					let top = res.height - 85;//这个85 滚动区域占据页面85vh
					if (top > 0) {
						this.scrollTop = top;
					}
				}).exec()
			})
		},
		// 关闭新增编辑弹窗
		backMaskEvent() {
			this.isMask = false
			this.params.page = 1
			this.tagList = []
			this.loading = false
			this.getTagList(1)
		},
		// 编辑
		eitEvent(ite) {
			this.eitFrom = ite
			this.isMask = true
		},
		backBtn() {
			uni.navigateBack()
		},
		scrolltolower(e) {
			if (this.tagList.length < this.total) {
				this.params.page++
				this.getRedPacket()
			} else {
				uni.showToast({
					title: '已到底',
					icon: 'none'
				})
			}
			console.log('e.detail.scrollTop', e.detail.scrollTop)
		},
		// getTagList
		async getTagList(type) {
			const {
				data
			} = await this.$request(this.$Api.tagList, {
				name: this.from.name
			}, "get")
			this.loading = true
			if (data.code != 200) return
			uni.stopPullDownRefresh()
			if (!data.data) return
			this.tagList = data.data.list
			if(type === 1){
				this.chatScrollTop()
			}
			
		},
		// 搜索
		couponEvent() {
			this.$utils.throttle((res) => {
				this.params.page = 1
				this.tagList = []
				this.loading = false
				this.getTagList()
			}, 800)
		},
		backCloseEvent() {
			this.isMask = false
		},
		addTagEvent() {
			this.isMask = true
			this.eitFrom = {}
			this.randomNum()
		},
		// 生成随机值
		randomNum() {
			this.random = parseInt(Math.random() * 10)
			console.log('生成随机值', this.random)
		},
		// 删除后不可恢复，不可查看活动信息，是否要删除活动
		deleteEvent(ite, idx) {
			uni.showModal({
				title: '提示',
				content: '删除后将同步删除已贴的标签，您确定删除该标签吗？',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						const {
							data
						} = await this.$request(this.$Api.tagDelete, {
							tagId: ite.tagId
						}, "POST")
						if (data.code !== 200) return
						// 执行软删除
						this.tagList.splice(idx, 1)
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
					}
				}
			})
		},
	}
}
</script>

<style lang="scss">
.endLive {
	width: 100%;
	padding: 0 !important;
	margin: 0 !important;
	height: 100vh;
	overflow: hidden;
	background: #FAFBFF !important;
}

.userTagBtn {
	width: 750rpx;
	// height: 166rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	.userTagBtn_text {
		width: 640rpx;
		height: 80rpx;
		background: #295FFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
	}

}

.scrollView {
	height: calc(100% - 240rpx);

	.userTagItems {
		width: 100%;
		height: 152rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 16rpx;
		box-sizing: border-box;

		.userTagItems_top {
			display: flex;
			align-items: center;
			position: relative;
			font-size: 28rpx;
			color: #464C5B;

			.userTagItems_top_lable {
				min-width: 28rpx;
				height: 46rpx;
				border-radius: 8rpx;
				border: 2rpx solid #0975E0;
				text-align: center;
				line-height: 46rpx;
				color: #0975E0;
				font-size: 24rpx;
				margin-right: 16rpx;
				padding: 0 16rpx;
			}

			.tjLable {
				min-width: 28rpx;
				height: 46rpx;
				border-radius: 8rpx;
				border: 2rpx solid #05B76B;
				text-align: center;
				line-height: 46rpx;
				color: #05B76B;
				font-size: 24rpx;
				margin-right: 16rpx;
				padding: 0 16rpx;
			}

			.dbLable {
				min-width: 28rpx;
				height: 46rpx;
				border-radius: 8rpx;
				border: 2rpx solid #FF5A5F;
				text-align: center;
				line-height: 46rpx;
				color: #FF5A5F;
				font-size: 24rpx;
				margin-right: 16rpx;
				padding: 0 16rpx;
			}

			.userTagItems_top_text {
				display: flex;
				align-items: center;

				span {
					width: 12rpx;
					height: 12rpx;
					background: #00C795;
					border-radius: 50%;
					margin: 0 16rpx 0 0;
				}

				.spanColor {
					width: 12rpx;
					height: 12rpx;
					background: #FE6637;
					border-radius: 50%;
					margin: 0 16rpx 0 0;
				}

				.userTagItems_top_peo {
					width: 300rpx;
				}
			}

			.userTagItems_top_num {
				color: #295EFF;
				font-weight: 500;
				position: absolute;
				right: 0;
			}
		}

		.userTagItems_bottom {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 24rpx;
			padding-right: 16rpx;

			.userTagItems_bottom_btn {
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 48rpx;
				width: 112rpx;
				height: 48rpx;
				background: #295EFF;
				border-radius: 24rpx;
				margin-right: 32rpx;
			}

			.userTagItems_bottom_left {
				font-size: 24rpx;
				color: #295EFF;
			}
		}
	}
}

.prizeDraw_top_title {
	width: 100%;
	height: 96rpx;
	font-size: 28rpx;
	color: #464C5B;
	text-align: left;
	font-weight: 500;
	line-height: 64rpx;
	box-sizing: border-box;
	position: relative;
	padding-bottom: 32rpx;

	input {
		width: 100%;
		height: 100%;
		border: 1rpx solid #979797;
		border-radius: 16rpx;
		padding: 0 124rpx 0 24rpx;
		box-sizing: border-box;
		font-size: 24rpx;

	}

	.inputSeach {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 36rpx;
		top: 6rpx;
	}

}


.userDetail {
	position: fixed;
	top: 0rpx;
	// left: 32rpx;
	z-index: 1;
	padding: 0 32rpx;
	width: 100%;
	height: 100vh;
	padding-top:138rpx;
	// padding-bottom: 250rpx;
	overflow-y: scroll;
	box-sizing: border-box;
}


.endLiveCont {
	width: 100%;
	// height: 100vh;
	position: relative;
	padding: 30rpx 0;
	box-sizing: border-box;
	color: #fff;
	z-index: 0;
	// overflow-y: scroll;



	.endLiveCenter {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 0;
		box-sizing: border-box;
		overflow-y: scroll;
		z-index: 1;

	}

	.bjImg {
		width: 100%;
		min-height: 1628rpx;
		position: absolute;
		left: 0;
		top: 0;
		background: #FAFBFF;
		z-index: 1;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.endLiveCont_back {
		width: 100%;
		height: 80rpx;
		float: left;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.endLiveCont_back_img {
			width: 58rpx;
			height: 58rpx;
			float: left;
			position: absolute;
			top: 10rpx;
		}

		span {
			font-size: 28rpx;
			margin-left: 72rpx;
			color: #1D2129;
			line-height: 80rpx;
		}

		.useLable {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 172rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 2rpx solid #295EFF;
			margin-right: 32rpx;
			padding: 0 18rpx;
			box-sizing: border-box;
			color: #295EFF;
			font-size: 24rpx;
			line-height: 44rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}



}
</style>